.HeadLine {
  display: flex;
  width: 87%;
  margin: 0 auto;
  flex-direction: column;
  text-align: center;
  background-color: transparent;
}
.HeadLine.color-blue {
  color: #0e7cdc;
}
.HeadLine.color-green {
  color: #00b55d;
}
.HeadLine.color-red {
  color: #ff3b38;
}
.HeadLine.color-orange {
  color: #d97000;
}
.HeadLine .title {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-weight: bold;
}

/* 見出しレベル */
.HeadLine .title.level-1 {
  font-size: 28px;
  padding: 0 0 14px 0;
  border-style: none none solid none;
  border-width: 3px;
}
.HeadLine .title.level-1.color-blue {
  border-color: #0e7cdc;
}
.HeadLine .title.level-1.color-green {
  border-color: #00b55d;
}
.HeadLine .title.level-1.color-red {
  border-color: #ff3b38;
}
.HeadLine .title.level-1.color-orange {
  border-color: #d97000;
}

.HeadLine .title.level-2 {
  font-size: 1.4rem;
  padding: 0 0 14px 0;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 608px 4px;
}
.HeadLine .title.level-2.color-blue {
  background-image: url("./images/imgLineDashBlue.png");
}
.HeadLine .title.level-2.color-green {
  background-image: url("./images/imgLineDashGreen.png");
}
.HeadLine .title.level-2.color-red {
  background-image: url("./images/imgLineDashRed.png");
}

.HeadLine .title.level-3 {
  font-size: 32px;
}

/*************************************************************************************************
 * タブレット・デスクトップ向け
 *************************************************************************************************/
@media screen and (min-width:641px) {
  .HeadLine .title.level-1,
  .HeadLine .title.level-2,
  .HeadLine .title.level-3 {
    font-size: 30px;
  }
}
